<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:09
-->
<template>
  <div class="container">
    <div class="wrapper">
      <!-- 项目信息开始 -->
      <h2>{{projectFor.name}}</h2>
      <div>项目费用： {{projectFor.projectMoney}}元</div>
      <div>
        起止时间： {{projectFor.beginTime|fmtDate}} ~ {{projectFor.endTime|fmtDate}}
      </div>
      <div>{{projectFor.introduce}}</div>
      <!-- 项目信息结束 -->
      <!-- 步骤条开始 -->
      <div class="stepBar">
        <el-steps :active="1" align-center>
          <el-step
            title="申请报名"
            description="用户选择自己喜欢的项目进行报名"
          ></el-step>
          <el-step
            title="管理员确认"
            description="管理员确认用户报名，为用户开放账号"
          ></el-step>
          <el-step
            title="用户付款"
            description="用户登录后可以进行确认，完成付款"
          ></el-step>
          <el-step
            title="报名完成"
            description="报名接受后等待管理员线下通知"
          ></el-step>
        </el-steps>
      </div>
      <!-- 步骤条结束 -->
      <!-- 表单开始 -->
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 姓名 -->
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <!-- 姓名结束 -->
          <!-- 手机号开始 -->
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-form-item>
          <!-- 手机号结束 -->
          <!-- 性别开时 -->
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="ruleForm.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 性别结束 -->
          <!-- 出生日期开始 -->
          <el-form-item label="出生日期" >
            <el-col :span="11">
              <el-form-item prop="birth">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.birth"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <!-- 出生日期结束 -->
          <!-- 地址开始 -->
          <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <!-- 地址结束 -->
        </el-form>
      </div>
      <!-- 表单结束 -->
      <!-- 报名按钮开始 -->
      <div class="btnSubmit">
        <el-button type="primary" @click="submitForm()">确认报名</el-button>
        <br>
         <el-link type="primary" @click="toApplyQuery()">已报名？查看报名进度 >></el-link>
      </div>
      <!-- 报名按钮结束 -->
    </div>
  </div>
</template>

<script>
import { get,post } from "@/utils/request";
import moment from 'moment'
export default {
  data() {
    return {
      id: "",
      projectFor: null,
      // 表单开始
      ruleForm: {
        name:'',
        telephone:'',
        gender:'',
        birth:'',
        address:''
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入手机号码", trigger: "blur"},
          {  message: "请输入正确的手机号码", trigger: "blur" },

        ],
        gender:[
          {required: true,  trigger: 'change' }
        ],
        birth: [
          {
            type: "date",
            // required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
      // 表单结束
    };
  },
  methods: {
    // 通过id查询研学项目详情
    findProjectById() {
      get("/index/project/findById?id=" + this.$route.query.id).then((res) => {
        if (res.status == 200) {
          console.log(res.data);
          this.projectFor = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 表单代码
    submitForm() {
      var moment = require('moment');
      this.ruleForm.birth = moment(this.ruleForm.birth).format('x');
      this.ruleForm.projectId = this.$route.query.id;
      console.log(this.ruleForm.birth);
      post('/index/apply/saveOrUpdate',this.ruleForm).then(res => {
        console.log(res);
        if(res.status == 200){
          this.$message({
            type:'success',
            message:res.message
          })
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
      // console.log(this.ruleForm);
    },
    // toApplyQuery跳转到查询页面
    toApplyQuery(){
      this.$router.push({path:'/applyQuery',query:{id:this.id}})
    }
    
  },
  created() {
    this.id = this.$route.query.id;
    this.findProjectById();
  },
};
</script>

<style scoped lang='scss'>
.container {
  padding: 1em 0;
  .wrapper {
    width: 70%;
    h2 {
      text-align: center;
    }
    div {
      line-height: 2em;
    }
    .stepBar {
      margin: 2em 0;
    }
    // 表单样式
    .form {
      margin: 0 212px;
      padding: 2em;
    }
    .btnSubmit{
      text-align: center;
    }
  }
}
</style>